body {
  margin: 0;
  font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans', Arial, sans-serif;
  background: var(--bg-main);
}

:root {
  --bg-main: linear-gradient(120deg, #f8fafc 0%, #e0e7ef 100%);
  --bg-panel: #fff;
  --text-main: #2d3a4b;
  --shadow-main: 0 4px 24px rgba(0,0,0,0.08);
  --border-main: #e0e7ef;
  --footer: #888;
}
body[data-theme='dark'] {
  --bg-main: linear-gradient(120deg, #23272e 0%, #2d3440 100%);
  --bg-panel: #23272e;
  --text-main: #e0e7ef;
  --shadow-main: 0 4px 24px rgba(0,0,0,0.28);
  --border-main: #23272e;
  --footer: #aaa;
}

.app-container {
  max-width: 600px;
  margin: 30px auto;
  background: var(--bg-panel);
  border-radius: 18px;
  box-shadow: var(--shadow-main);
  padding: 24px 24px 12px 24px;
  text-align: center;
}

.theme-switcher {
  text-align: right;
  margin-bottom: 4px;
}

h1 {
  font-size: 2.2rem;
  color: var(--text-main);
  margin-bottom: 12px;
  letter-spacing: 2px;
}

footer {
  margin-top: 18px;
  color: var(--footer);
  font-size: 0.95rem;
} 